<template>
    <div class="usage">
        <el-row type="flex">
            <el-col :span="12">
                <pre><div v-html="code1"></div></pre>
            </el-col>
            <el-col class="text-left" :span="12">
                <div class="flex-center-align">
                    <label>choose：</label>
                    <el-select-tree
                            v-if="show"
                            :default-expand-all="defaultExpandAll"
                            :multiple="multiple"
                            :placeholder="placeholder"
                            :disabled="disabled"
                            :popover-min-width="100"
                            :data="treeData"
                            :props="treeProps"
                            :disabled-values="disabledValues"
                            :check-strictly="checkStrictly"
                            v-model="value1"
                    ></el-select-tree>
                    <span>current value：{{ value1 }}</span>
                </div>
                <el-divider></el-divider>
                <div class="flex-center-align">
                    <label>choose any level：</label>
                    <el-switch v-model="checkStrictly"></el-switch>
                    <span v-if="checkStrictly">try to choose parent</span>
                </div>
                <el-divider></el-divider>
                <div class="flex-center-align">
                    <label>disabled：</label>
                    <el-switch v-model="disabled"></el-switch>
                </div>
                <el-divider></el-divider>
                <div class="flex-center-align">
                    <label>multiple choose：</label>
                    <el-switch v-model="multiple"></el-switch>
                </div>
                <el-divider></el-divider>
                <div class="flex-center-align">
                    <label>expand all tree node：</label>
                    <el-switch v-model="defaultExpandAll" @change="refresh()"></el-switch>
                    <span v-if="defaultExpandAll">You know, this property must be defined when initializing!</span>
                </div>
                <el-divider></el-divider>
                <el-link
                        type="primary"
                        href="https://github.com/yujinpan/el-select-tree#attributes">more attributes look：https://github.com/yujinpan/el-select-tree#attributes
                </el-link
                >
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {highlight} from '@/components/usage/highlight';

    export default {
        name: "Usage",
        data() {
            return {
                code1: highlight('html', require('./example').example),
                defaultExpandAll: false,
                multiple: false,
                placeholder: 'please choose',
                disabled: false,
                checkStrictly: false,
                value1: '2',
                treeData: [
                    {
                        label: '新疆维吾尔自治区',
                        id: '1',
                        childrens: [
                            {
                                label: '乌鲁木齐市',
                                id: '2',
                                childrens: [
                                    { label: '达坂城区', id: '7', childrens: [] },
                                    { label: '头屯河区', id: '8', childrens: [] },
                                    { label: '乌鲁木齐县', id: '9', childrens: [] }
                                ]
                            },
                            {
                                label: '克拉玛依市',
                                id: '3',
                                childrens: [
                                    { label: '克拉玛依区', id: '10', childrens: [] },
                                    { label: '白碱滩区', id: '11', childrens: [] },
                                    { label: '独山子区', id: '12', childrens: [] }
                                ]
                            },
                            { label: '吐鲁番地区', id: '4', childrens: [] },
                            { label: '哈密地区', id: '5', childrens: [] },
                            { label: '昌吉回族自治州', id: '6', childrens: [] }
                        ]
                    }
                ],
                treeProps: {
                    value: 'id',
                    children: 'childrens',
                    label: 'label'
                },
                disabledValues: [3],
                show: true
            }
        },
        methods: {
            refresh() {
                this.show = false;
                setTimeout(() => (this.show = true), 200);
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../components/usage/usage";
</style>
